<!-- templates/index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>雷电检测系统数据标注平台</title>
    <style>
        .container { max-width: 800px; margin: 0 auto; padding: 20px; }
        #videoContainer { 
            width: 100%; 
            height: 500px;
            border: 2px dashed #ccc;
            /* background: url('/static/default.jpg') center/cover; */
            position: relative;
        }
        #uploadProgress {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 20px;
            border-radius: 5px;
        }
        #resultVideo {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
        .button {
            background: #2196F3;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            margin: 10px 0;
        }
        #diagnosisResult {
            font-size: 24px;
            color: #4CAF50;
            margin: 20px 0;
        }
        #downloadSection {
            display: none;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        第一帧
        <div id="videoContainer1" style="border: gray solid 3px;">
            <img id="frm01Img" src="" alt="第一帧">
            <input id="frm01Cls" type="checkbox" onclick="updateFrmCls(0)" />是否为可预测帧
            <input id="frm01Key" type="hidden" />
        </div>
        <br />第二帧
        <div id="videoContainer2" style="border: gray solid 3px;">
            <img id="frm02Img" src="" alt="第二帧">
            <input id="frm02Cls" type="checkbox" onclick="updateFrmCls(1)" />是否为可预测帧
            <input id="frm02Key" type="hidden" />
        </div>
        <br />第三帧
        <div id="videoContainer3" style="border: gray solid 3px;">
            <img id="frm03Img" src="" alt="第三帧">
            <input id="frm03Cls" type="checkbox" onclick="updateFrmCls(2)" />是否为可预测帧
            <input id="frm03Key" type="hidden" />
        </div>
        <br />第四帧
        <div id="videoContainer4" style="border: gray solid 3px;">
            <img id="frm04Img" src="" alt="第四帧">
            <input id="frm04Cls" type="checkbox" onclick="updateFrmCls(3)" />是否为可预测帧
            <input id="frm04Key" type="hidden" />
        </div>
        <br />第五帧
        <div id="videoContainer5" style="border: gray solid 3px;">
            <img id="frm05Img" src="" alt="第五帧">
            <input id="frm05Cls" type="checkbox" onclick="updateFrmCls(4)" />是否为可预测帧
            <input id="frm05Key" type="hidden" />
        </div>
        <br />第六帧
        <div id="videoContainer6" style="border: gray solid 3px;">
            <img id="frm06Img" src="" alt="第六帧">
            <input id="frm06Cls" type="checkbox" onclick="updateFrmCls(5)" />是否为可预测帧
            <input id="frm06Key" type="hidden" />
        </div>
        <br />第七帧
        <div id="videoContainer7" style="border: gray solid 3px;">
            <img id="frm07Img" src="" alt="第七帧">
            <input id="frm07Cls" type="checkbox" onclick="updateFrmCls(6)" />是否为可预测帧
            <input id="frm07Key" type="hidden" />
        </div>
        <br />第八帧
        <div id="videoContainer8" style="border: gray solid 3px;">
            <img id="frm08Img" src="" alt="第八帧">
            <input id="frm08Cls" type="checkbox" onclick="updateFrmCls(7)" />是否为可预测帧
            <input id="frm08Key" type="hidden" />
        </div>
        <br />第九帧
        <div id="videoContainer9" style="border: gray solid 3px;">
            <img id="frm09Img" src="" alt="第九帧">
            <input id="frm09Cls" type="checkbox" onclick="updateFrmCls(8)" />是否为可预测帧
            <input id="frm09Key" type="hidden" />
        </div>
        <br />第十帧
        <div id="videoContainer10" style="border: gray solid 3px;">
            <img id="frm10Img" src="" alt="第十帧">
            <input id="frm10Cls" type="checkbox" onclick="updateFrmCls(9)" />是否为可预测帧
            <input id="frm10Key" type="hidden" />
        </div>
        
        <button class="button" id="nextFrame" onclick="nextFrame()">
            下一记录
        </button>
    </div>

    <script>
        const frmImgs = [
            document.getElementById("frm01Img"), document.getElementById("frm02Img"),
            document.getElementById("frm03Img"), document.getElementById("frm04Img"),
            document.getElementById("frm05Img"), document.getElementById("frm06Img"),
            document.getElementById("frm07Img"), document.getElementById("frm08Img"),
            document.getElementById("frm09Img"), document.getElementById("frm10Img")
        ];
        const frmClss = [
            document.getElementById("frm01Cls"), document.getElementById("frm02Cls"),
            document.getElementById("frm03Cls"), document.getElementById("frm04Cls"),
            document.getElementById("frm05Cls"), document.getElementById("frm06Cls"),
            document.getElementById("frm07Cls"), document.getElementById("frm08Cls"),
            document.getElementById("frm09Cls"), document.getElementById("frm10Cls")
        ];
        const frmKeys = [
            document.getElementById("frm01Key"), document.getElementById("frm02Key"),
            document.getElementById("frm03Key"), document.getElementById("frm04Key"),
            document.getElementById("frm05Key"), document.getElementById("frm06Key"),
            document.getElementById("frm07Key"), document.getElementById("frm08Key"),
            document.getElementById("frm09Key"), document.getElementById("frm10Key")
        ];
        var did = '';
        var rid = '';

        function getCurrUnlabel() {
            fetch('./get_curr_unlabel', {
                method: 'GET',
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    console.log('getCurrUnlabel Failed! No1')
                    return ;
                }
                // console.log('state=' + data.state + ';');
                // const len1 = data.rec_frms.length;
                // console.log('len1=' + len1 + '!');
                did = data.did;
                rid = data.rid;
                console.log('### did=' + did + '; rid=' + rid + '; ???????');
                for (let i=0; i<data.rec_frms.length; i++) {
                    frmImgs[i].src = '/images/' + data.rec_frms[i].image + '?folder=' + data.rec_frms[i].folder;
                    if (data.rec_frms[i].cls == '0') {
                        frmClss[i].value = "0";
                        frmClss[i].checked = false;
                    } else {
                        frmClss[i].value = "1";
                        frmClss[i].checked = true;
                    }
                    frmKeys[i].value = data.rec_frms[i].key;
                }
            })
            .catch (error => {
                console.log('getCurrUnlabel Failed! No2: ' + error + '!');
            })
        }
        function nextFrame() {
            const labels = {};
            for (let i = 0; i < frmKeys.length; i++) {
                const key = frmKeys[i].value;
                const cls = frmClss[i].checked ? '1' : '0';
                labels[key] = cls;
            }
        
            fetch('./save_labels', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(labels)
            })
            .then(response => response.json())
            .then(data => {
                if (data.state === 1) {
                    getCurrUnlabel();
                } else {
                    console.log('保存标注结果失败');
                }
            })
            .catch(error => {
                console.log('保存标注结果时发生错误: ' + error);
            });
        }
        function updateFrmCls(idx) {
            console.log('update: ' + frmKeys[idx].value + '; v=' + idx + '; cv=' + frmClss[idx].checked + '; ????????');
            const formData = new FormData();
            formData.append('key', frmKeys[idx].value);
            if (frmClss[idx].checked) {
                formData.append('cls', '1');
            } else {
                formData.append('cls', '0');
            }
            fetch('/update_frame_cls', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (data.error) {
                    console.log('updateFrameCls Failed! No=1');
                }
                console.log('updateFrameCls is OK!');
            })
            .catch (error => {
                console.log('updateFrameCls Failed! No=2');
            })
        }
        
        getCurrUnlabel();
    </script>
</body>
</html>